<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/costom.css"/>
<link rel="stylesheet" type="text/css" href="../css/semantic.css"/>
<script src="../js/VUE.js"></script>

<body>
<div id="AllElement" style="padding-left: 40%;padding-top: 10em">

    <!--    <ul class="m-ul" class="ui column">-->
    <!--        <li>1</li>-->
    <!--        <li>2</li>-->
    <!--        <li>3</li>-->
    <!--        <li>4</li>-->
    <!--    </ul>-->

    <!--    烤肉串格式-->
    <!--    Tab // 切换焦点-->
    <!--    <div class="ui input">-->
    <!--        <div style="width: 100px;height: 100px;background-color: #1a69a4;margin-top: 1em" @click="alert">-->
    <!--            <a href="hopeicloud.cn" @click.stop.prevent="showInfo">-->
    <!--                <h4 class="ui header">你的老乡</h4>-->
    <!--            </a>-->
    <!--        </div>-->
    <!--        <input type="text" placeholder="按下显示提示信息" @keydown.ctrl.s="save">-->
    <!--    </div>-->
    <div class="ui list">
        <div class="ui input item">
            <input type="text" placeholder="输入姓" v-model="firstName">
        </div>
        <div class="ui input item">
            <input type="text" placeholder="输入名" v-model="lastName">
        </div>
        <div class="ui input item">
            <!--            slice相当于String的subString(x,y)-->
            <input type="text" placeholder="姓名" ::value="fullName()">
        </div>
    </div>

</div>
</body>

<script>
    var const01 = new Vue({
        el: "#AllElement",
        data: {
            firstName: "H",
            lastName: "ZQ",
            name: 'HZQ',
        },
        methods: {
            alert() {
                window.alert("冒泡的上层DIV")
            },
            save() {
                console.log("保存")
            },
            fullName() {
                return this.firstName + '-' + this.lastName;
            }
        },
    });
</script>

</html>